<template>
    <div class="ces-search">
        <el-form :class="flag ? 'form' : 'form less'" ref="refForm" :inline="inline" :label-width="labelWidth"
            style="width: 80%;height:'height';padding-bottom:5px;">

            <div class="from"></div>
            <el-form-item clearable v-for='item in tableCols' style="height:15px;" :inline="inline"
                v-if="item.IsSearch == '1'" :label="item.label" :key='item.prop' class="demo-form-inline">
                <!-- 输入框 -->
                <el-input size="small" v-if="item.type === 'Input' && item.IsSearch == '1'" :placeholder="item.label"
                    v-model="searchData[item.prop]" @keyup.enter.native="handleEnter"
                    style="width: 100%;height: 10px;"></el-input>
                <!-- 下拉框 -->
                <el-select clearable size="small" :placeholder="item.label"
                    v-if="item.type === 'Select' && item.IsSearch == '1'" v-model="searchData[item.prop]"
                    @keyup.enter.native="handleEnter" style="width: 100%">
                    <el-option :label="ColsRow.label" :value="ColsRow.value"
                        v-for="ColsRow in item.ColsRowDate"></el-option>
                </el-select>
                <!-- 单选 -->
                <el-radio-group size="small" v-if="item.type === 'radio' && item.IsSearch == '1'"
                    @keyup.enter.native="handleEnter" v-model="searchData[item.prop]" style="width: 100%">
                    <el-radio :label="ColsRow.value" v-for="ColsRow in item.ColsRowDate">{{ ColsRow.label }}</el-radio>
                </el-radio-group>
                <!-- 日期范围 -->
                <el-date-picker size="small" v-if="item.type === 'datetime' && item.IsSearch == '1'"
                    @keyup.enter.native="handleEnter" v-model="searchData[item.prop]" type="daterange"
                    start-placeholder="开始日期" value-format="yyyy-MM-dd HH:mm:ss" end-placeholder="结束日期"
                    :default-time="['00:00:00', '00:00:00']" style="width: 230px" />
                <!-- 日期时间 -->
                <el-date-picker v-if="item.type == 'month' && item.IsSearch == '1'" type='month'
                    @keyup.enter.native="handleEnter" v-model="searchData[item.prop + '_Datatime']"
                    :style="'width:' + item.width + 'px'" size="mini"></el-date-picker>
                <!-- 开关 -->
                <!-- <el-switch v-if="item.type==='Switch'&&IsSearch=='1'" v-model="item.prop" ></el-switch> -->
            </el-form-item>
            <span class="topHeingh"></span>
        </el-form>
        <div :class="show ? 'more' : 'none more'" style="transform :translate(-10vw,2.3vh)">
            <div class="size" @click="chang">{{ flag ? '<<收起' : '>>更多' }}</div>
            </div>

        </div>
</template>

<script>
export default {
    props: {
        frame: {
            type: Boolean,
            default: false,
        },
        height: {
            type: String,
            default: null
        },
        isHandle: {
            type: Boolean,
            default: true
        },
        inline: {
            type: Boolean,
            default: true
        },
        labelWidth: {
            type: String,
            default: '50px'
        },
        size: {
            type: String,
            default: 'mini'
        },
        searchHandle: {
            type: Array,
            default: () => []
        },
        searchData: { type: Array, default: () => [] },
        tableCols: { type: Array, default: () => [] },
    },
    data() {
        return {
            show: false,
            flag: false,
            offsetTop: null,
        };
    },
    mounted() {
        if (this.frame) {
            this.flag = !this.flag
        } else {
            setTimeout(() => {
                let topHeingh = document.querySelector('.topHeingh');
                if (topHeingh.offsetTop != 0) this.offsetTop = topHeingh.offsetTop + 6
                if (topHeingh.offsetTop > 30) {
                    this.show = true
                }
            }, 1000)
        }
        // setTimeout(() => {
        //     this.tableCols
        //     debugger
        // },2000)

    },
    watch: {
        // tableCols(newVal, oldVal) {
        //     alert(1)
        //     setTimeout(() => {
        //         let topHeingh = document.querySelector('.topHeingh');
        //         if (topHeingh.offsetTop != 0) this.offsetTop = topHeingh.offsetTop + 6
        //         if (topHeingh.offsetTop > 30) {
        //             this.show = true
        //         }
        //     }, 10)
        //     debugger
        // }
    },
    methods: {
        chang() {
            this.flag = !this.flag
            let num = this.flag ? this.offsetTop : -this.offsetTop
            this.$emit('chang', num)
            // debugger
        },

        handleEnter() {

            this.$emit('handDataList');
            this.$emit('handleEnter');
        }



    }

}

</script>
<style lang="scss">
.ces-search {
    display: flex;
    justify-content: space-between;
    padding-top: 6px;

    // /deep/ .el-form-item__label::before{
    //     display: none;
    // }

    .demo-form-inline {
        .el-form-item__label {
            width: 82px !important;
        }
    }
}

.form {
    position: relative;
}

.less {
    height: 36px;
    overflow: hidden;
}

.none {
    display: none
}

.size {
    font-size: 12px;
    font-weight: 900;
    color: #1890ff;
    cursor: pointer;
    width: 4vw;
}
</style>